<template>
	<view>
		<view class="center">
			<u-navbar title="" @rightClick="rightClick" :autoBack="true">
			</u-navbar>
		</view>
		<view>
			<view class="flx">
				<view class="tabicon">
					<image :src="circleDetail.userInfo.avatarUrl" class="icon_img"></image>
				</view>
				<view class="">
					<view class="fx111">
						<view class="mgb-20">
							<text class="txt">{{circleDetail.userInfo.nickName}}</text>
							<text class="btn">{{circleDetail.userGrade}}</text>
						</view>
					</view>
					<view class="flx1">
						<view class="sltxt">{{circleDetail.createTime}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="zt">{{circleDetail.title}}</view>
				<view class="con">
					{{circleDetail.content}}
				</view>
				<view>
					<image :src="item" v-for="(item, index) in circleDetail.pigList" :key="index" class="con_tu">
					</image>
				</view>
			</view>
			<view class="hui"></view>
			<view class="hf">
				<view class="hf_head">全部回复</view>
				<view class="hf_line"></view>
				<view v-if="!circleDetail.discussList || circleDetail.discussList.length == 0">暂无回复～</view>
				<view v-for="(item, index) in circleDetail.discussList" :key="index">
					<view>
						<view class="hf_flx">
							<view class="hf_tabicon">
								<image src="../../static/logo.png" class="hf_icon_img"></image>
							</view>
							<view class="hf_FX1">
								<view class="hf_fx111">
									<view class="mgb-20">
										<text class="hf_txt">只能说的可</text>
										<text class="hf_btn">会员等级</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="hf_con">
						巨大石块的骄傲快速了解的卡拉就少得可怜精神独立声卡决定了洒家打开拉萨就诞生了就撒开了的杰克萨利决定离开洒家打开拉萨
					</view>
					<view class="hf_flex">
						<view class="hf_flextime">2024/02/11</view>
						<view class="hf_flex1">
							<view class="hf_flextxt">
								<!-- <image src="../../static/组 37@2x (1).png" class="hf_xiao"></image> -->
								<span>555555555</span>
							</view>
							<view class="hf_flextxt">
								<image src="../../static/yyz1.png" class="hf_xiao"></image>
								<span>555555555</span>
							</view>
						</view>
					</view>
					<view class="hf_hui">
						<view>
							<span>人工1号：</span>
							<span>jdkajdk;sajd;</span>
						</view>
						<view>
							<span>人工2号：</span>
							<span>jdkajdk;sajd;</span>
						</view>
						<view class="hf_gd" @click="more">
							查看更多
						</view>
					</view>
					<view class="hf_di"></view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_ipt">
				<up-input placeholder="请文明发帖" border="surround" v-model="discussContent" shape='circle'
					class="up_ipt"></up-input>
				<view class="foot_btn" @click="onAddDiscuss
">发送</view>
			</view>
		</view>



		<view @touchmove.stop.prevent="prevent"> <!-- //@touchmove.stop.prevent="prevent" -->
			<u-popup :show="show" mode="bottom" @close="close" closeOnClickOverlay>
				<scroll-view scroll-y='true'>
					<view class="pop_box">
						<view class="pop">
							<view class="cls_box">
								<image src="../../static/yhk2.png" class="cls"></image>
							</view>
							<view class="head_txt">2楼的回复</view>
						</view>
						<view class="line"></view>
						<view v-for="(item, index) in discussList" :key="index">
							<view>
								<view class="hf_flx">
									<view class="hf_tabicon">
										<image src="../../static/logo.png" class="hf_icon_img"></image>
									</view>
									<view class="hf_FX1">
										<view class="hf_fx111">
											<view class="mgb-20">
												<text class="hf_txt">只能说的可</text>
												<text class="hf_btn">会员等级</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="hf_con">
								巨大石块的骄傲快速了解的卡拉就少得可怜精神独立声卡决定了洒家打开拉萨就诞生了就撒开了的杰克萨利决定离开洒家打开拉萨
							</view>
							<view class="hf_flex">
								<view class="hf_flextime">2024/02/11</view>
								<view class="hf_flex1">
									<view class="hf_flextxt">
										<!-- <image src="../../static/组 37@2x (1).png" class="hf_xiao"></image> -->
										<span>555555555</span>
									</view>
									<view class="hf_flextxt">
										<image src="../../static/yyz1.png" class="hf_xiao"></image>
										<span>555555555</span>
									</view>
								</view>
							</view>
							<view class="hf_di"></view>
						</view>
					</view>
				</scroll-view>
				<view class="db_box"></view>
				<view class="db">
					<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change" shape="circle"
						class="db_inp"></u--input>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				circleId: '',
				circleDetail: {
					title: '',
					content: '',
					discussList: [],
					userInfo: {},
					userGrade: ''
				},
				discussList: [],
				value: '',
				show: false,
				list1: [{
					name: '关注',
				}, {
					name: '推荐',
				}, {
					name: '热门'
				}],
				tabtt: [{
					txt: "实践活动1",
					txt1: "11大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动3",
					txt1: "33大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}, {
					txt: "实践活动2",
					txt1: "22大石街道雷克萨简单来说卡机的"
				}],

				/**评论内容**/
				discussContent: '',
			}
		},
		onLoad(option) {
			this.circleId = option.circleId;
			this.getCircleDetail();
		},
		methods: {
			getCircleDetail() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('plus/circle/detailCircle', {
					id: self.circleId
				}, function(res) {
					self.discussList = res.data.discussList;
					self.circleDetail = res.data;
					uni.hideLoading();
				})
			},
			prevent(e) {}, //弹窗弹起禁止页面滑动
			more() {
				console.log('888888888')
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			change(e) {
				console.log('change', e);
			},


			getCurrentDateTime() {
				let now = new Date();
				let year = now.getFullYear();
				let month = this.padZero(now.getMonth() + 1);
				let date = this.padZero(now.getDate());
				let hours = this.padZero(now.getHours());
				let minutes = this.padZero(now.getMinutes());
				let seconds = this.padZero(now.getSeconds());
				return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
			},
			/*补零*/
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},


			/**发送评论*/
			onAddDiscuss(item) {
				let that = this
				if (!this.discussContent) {
					uni.showToast({
						title: '请输入评论',
						icon: 'none'
					})
					return
				};
				let data = {
					circleId: this.circleDetail.id,
					toDiscussId: item.toDiscussId ? item.toDiscussId : '', //回复用户id
					discussContent: this.discussContent,
					discussId: uni.getStorageSync('userData').userId,
					createTime: this.getCurrentDateTime(),
					toDiscussName: item.toDiscussName ? item.toDiscussName : ''
				}
				that._postBody('plus/circle/addDiscuss', data, function(res) {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					});
					that.discussContent = '';
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #FFFFFF;
	}

	.center {
		height: 44px;
	}

	.tabicon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 33rpx;

		.icon_img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.flx {
		display: flex;
		align-items: center;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding-top: 46rpx;
	}

	.flx1 {
		display: flex;
	}

	.fx111 {
		display: flex;

		// justify-content: space-between;
		.btn {
			text-align: center;
			// width: 77rpx;
			height: 22rpx;
			line-height: 22rpx;
			background: #0F4BCB;
			border-radius: 10rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 9rpx;
			margin-left: 23rpx;
		}

		.txt {
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
	}

	.sltxt {
		font-family: Source Han Sans CN;
		font-weight: 300;
		font-size: 24rpx;
		color: #999999;
		line-height: 50rpx;
	}

	.shan {
		width: 20rpx;
		height: 20rpx;
	}

	.zt {
		margin-top: 70rpx;
		margin-left: 30rpx;
		margin-bottom: 38rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 43rpx;
	}

	.con {
		margin-left: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.con_tu {
		width: 200rpx;
		height: 280rpx;
		margin-top: 40rpx;
		margin-left: 30rpx;
		display: inline-block;
	}

	.hui {
		margin-top: 230rpx;
		margin-bottom: 80rpx;
		width: 100%;
		height: 28rpx;
		background: #F2F2F2;
		border: 1px solid #FFFFFF;
	}

	.hf {
		margin-left: 50rpx;
		margin-right: 50rpx;
		margin-bottom: 200rpx;

		.hf_head {
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 43rpx;
		}

		.hf_line {
			border-bottom: 1rpx solid;
			background: #999999;
			border-radius: 1rpx;
			margin-top: 40rpx;
		}

		.hf_flx {
			display: flex;
			align-items: center;
			margin-right: 40rpx;
			padding-top: 46rpx;
		}

		.hf_flx1 {
			display: flex;
		}

		.hf_tabicon {
			width: 80rpx;
			height: 80rpx;
			margin-right: 33rpx;

			.hf_icon_img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.hf_fx111 {
			display: flex;
			justify-content: space-between;

			.hf_btn {
				text-align: center;
				width: 77rpx;
				height: 22rpx;
				line-height: 22rpx;
				background: #0F4BCB;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 9rpx;
				margin-left: 23rpx;
			}

			.hf_txt {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.hf_con {
			margin-bottom: 30rpx;
			margin-top: 35rpx;
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #333333;
		}

		.hf_xiao {
			// vertical-align: middle;
			width: 35rpx;
			height: 35rpx;
		}

		.hf_flex {
			display: flex;
			justify-content: space-between
		}

		.hf_flex1 {
			display: flex;
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// vertical-align: middle;

		}

		.hf_flextxt {
			display: flex;
			align-items: center; //对齐
		}

		.hf_flextime {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			line-height: 50rpx;
		}

		.hf_hui {
			width: 590rpx;
			padding: 40rpx;
			background: #F6F6F6;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: 50rpx;
		}

		.hf_gd {
			margin-top: 45rpx;
		}

		.hf_di {
			width: 100%;
			height: 50rpx;
		}
	}

	.pop_box {
		// height: 500rpx;
		height: 1000rpx;
		padding: 35rpx 50rpx 40rpx 50rpx;

		.pop {
			display: flex;

			.cls_box {
				position: relative;
			}

			.cls {
				width: 25rpx;
				height: 25rpx;
			}

			.head_txt {
				margin-left: 40%;
			}
		}

		.line {
			margin-top: 50rpx;
			margin-bottom: 50rpx;
			border-top: 1px solid #D3D3D3;
			;
		}

		.hf_flx {
			display: flex;
			align-items: center;
			margin-right: 40rpx;
			padding-top: 46rpx;
		}

		.hf_flx1 {
			display: flex;
		}

		.hf_tabicon {
			width: 80rpx;
			height: 80rpx;
			margin-right: 33rpx;

			.hf_icon_img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.hf_fx111 {
			display: flex;
			justify-content: space-between;

			.hf_btn {
				text-align: center;
				width: 77rpx;
				height: 22rpx;
				line-height: 22rpx;
				background: #0F4BCB;
				border-radius: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				padding: 9rpx;
				margin-left: 23rpx;
			}

			.hf_txt {
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}
		}

		.hf_con {
			margin-bottom: 30rpx;
			margin-top: 35rpx;
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #333333;
		}

		.hf_xiao {
			// vertical-align: middle;
			width: 35rpx;
			height: 35rpx;
		}

		.hf_flex {
			display: flex;
			justify-content: space-between
		}

		.hf_flex1 {
			display: flex;
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			// vertical-align: middle;

		}

		.hf_flextxt {
			display: flex;
			align-items: center; //对齐
		}

		.hf_flextime {
			font-family: Source Han Sans CN;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			line-height: 50rpx;
		}

		.hf_di {
			width: 100%;
			height: 50rpx;
		}
	}

	.db {
		width: 100%;
		position: fixed;
		bottom: 0rpx;

		// margin-left:50rpx;
	}

	.db_inp {
		margin-left: 50rpx;
		margin-right: 50rpx;
		margin-bottom: 30rpx;
	}

	.db_box {
		height: 50rpx;
		width: 100%;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
	}

	.foot {
		height: 80rpx;
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		bottom: 0rpx;
	}

	.foot_btn {
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background: #0F4BCB;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		border-radius: 50%;
	}

	.foot_ipt {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
	}

	.tb {
		width: 50rpx;
		height: 50rpx;
	}

	.up_ipt {
		margin-left: 20rpx;
		height: 50rpx;
		background: #F2F2F2;
	}
</style>